<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root">
            <button @click="oauthGithub">使用 Github 登录</button>
            <div v-if="user">
                <p>{{user.name}}</p>
                <p>{{user.bio}}</p>
                <img :src="user.avatar_url" alt="" />
            </div>
        </div>
    </body>
    <script src="/vue.js"></script>
    <script src="/axios.min.js"></script>
    <script>
        axios.interceptors.request.use((config) => {
            let token = window.localStorage.getItem('token');
            if (token) {
                config.headers.Authorization = 'Bearer ' + token;
            }
            return config;
        });

        axios.interceptors.response.use((response) => {
            return response.data;
        });

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    user: null,
                };
            },
            methods: {
                async oauthGithub() {
                    window.open('/github/login', '_blank');
                    let iid = setInterval(() => {
                        // 授权登录中...
                        console.log('授权中...');
                        const authSuccess = window.localStorage.getItem(
                            'authSuccess'
                        );
                        if (authSuccess) {
                            window.localStorage.removeItem('authSuccess');
                            clearInterval(iid);
                            this.getUserInfo();
                        }
                    }, 500);
                },
                async getUserInfo() {
                    const res = await axios.get('/users/current');
                    console.log(res);
                    this.user = res;
                },
            },
        });
    </script>
</html>
